<template>
  <div
    class="list-wrapper"
    v-infinite-scroll="load"
    :infinite-scroll-disabled="disabled"
    :infinite-scroll-distance="2"
  >
    <reply-item v-for="r in replyList" :reply="r" :key="r.commentId">
    </reply-item>
    <footer-loading :noMore="noMore" :loading="loading"></footer-loading>
  </div>
</template>

<script>
import ItemList from "./items/ItemList.vue";
import ReplyItem from "./items/ReplyItem.vue";
import unreadApi from "@/axios/unreadApi";
import FooterLoading from '../CommonItems/FooterLoading.vue';
export default {
  components: {
    ItemList,
    ReplyItem,
    FooterLoading,
  },
  data() {
    return {
      replyList: [],
      loading: true,
      page: {
        current: 1,
        size: 3,
        pages: 0,
      },
      t: Date.now(),
    };
  },
  computed: {
    noMore() {
      return (
        (this.page.current == this.page.pages || this.page.pages == 0) &&
        !this.loading
      );
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      console.log("scroll");
      this.page.current++;
      this.loading=true
      this.fetchData();
    },
    fetchData() {
      unreadApi
        .getUnreadReplies({
          current: this.page.current,
          size: this.page.size,
          t: this.t,
        })
        .then(({ data }) => {
          if (data.code === this.$status.SUCCESS_CODE) {
            this.replyList.push(...data.data.records);
            this.page.pages = data.data.pages;
            this.loading = false;
          } else this.$message.error("获取数据出错");
        });
    },
  },

  created() {
    this.fetchData();
  },
  mounted() {
  },
};
</script>
 

<style scoped lang="less">
.list-wrapper {
  height: 600px;
  overflow-y: scroll;
}
</style>